<template>
	<view class="content">
		<view class="pageHeader">
			我的团队
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		
		<view class="regoodbox">
				<view class="navbar">
					<view v-for="(navitem, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
					 @click="tabClick(index)">
					 
						{{navitem.text}} <text style="font-size: 24upx;">({{navitem.num}})</text>
						
					</view>
				</view>
			
		</view>
		
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
					<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getTeamList('page')">
						<view v-if="tabItem.orderList.length === 0" class="empty">
							<image src="/static/empty.png" mode="widthFix"></image>
							<view class="empty-tips">
								暂无团队~
							</view>
						</view>
						<view v-for="(item,index) in tabItem.orderList" :key="index" style="padding: 22upx 0;font-size: 28upx;margin-bottom:4upx;background-color: #fff;">
							<view style="padding:0 30upx;">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;align-items: center;">
										<image :src="item.avatar" style="width: 70upx;height: 70upx;border-radius: 50%;margin-right: 34upx;"></image>
										<text style="font-size: 30upx;">{{item.nickname}}({{item.mobile!==''?'已绑定手机号':'未绑定手机号'}})</text>
									</view>
									<text style="font-size: 26upx;color: #1D84E8;">{{item.add_time_text}}</text>
								</view>
							</view>
						</view>
						
						<!-- <view>{{tabItem.orderList.length}}</view>v-show="tabItem.orderList.length>0" -->
						<uni-load-more :status="tabItem.loadingType"></uni-load-more>
					</scroll-view>
			</swiper-item>
		</swiper>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken:'',// token
				teamList:[],
				userId:'',
				empty:false,
				tabCurrentIndex: 0,
				// 加载的属性
				loadingType: 0,
				pageindex: 1,
				current: '',
				navList: [
				],
			}
		},
		onLoad(options) {
			let that = this
			that.userId=options.id
			that.userToken = uni.getStorageSync('token')
			that.getTeamList()
		},
		watch: {
			//显示空白页
			teamList(e) {
				let empty = e.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.getTeamList('tabChange');
			},
			
			getTeamList() {
				let that = this				
				
				postAjax('user/team',{token:that.userToken,referrer:that.userId},function(data){					
					console.log(data)
					if(data.code==0){
						that.navList=data.data
					}else{
						that.getTeamList()
					}
					
				
				})
			}
		}
	}
	
</script>

<style>
	.content{	height: 100vh;
	background-color: #F9F9F9;}
	.chargebtn{color: #1D84E8;}
	.transbtn{color:#fff;border:2upx solid #fff;background-color: transparent;margin-left: 20upx;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 54px;background-color: #1D84E8;line-height: 54px;text-align: center;font-size: 36upx;color: #fff;padding-top: 20px;}
	.generalBack{position: absolute;top:22px;left:30upx;display: block;}
	.rebtn{display: inline-block;font-size: 30upx;border-radius: 4upx;width:120upx;height: 58upx;line-height: 58upx;}
	.rebtn::after{border: none;}
	.regoodbox{padding:74px 0 5px;}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 20upx;
	}
	.swiper-box {
		height: calc(100% - 124px);
	}
	
	.list-scroll-content {
		height: 100%;
	}
	
	.uni-swiper-item {
		height: auto;
	}
	.logistics-title {
		position: relative;
	    box-sizing: border-box;
	    padding:16upx 0;
		border-bottom:2upx solid #EEEEEE;
	    line-height: 28upx;
	    color: #4B4B4B;
	    font-size: 26upx;
	    font-family: 'PingFangSC-Medium';
	    text-align: left;
	}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10;
		height: 100vh;
		margin-top: -10vh;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	
	}
	
	.empty image {
		width:240upx;
		margin-bottom: 30upx;
	}
	.empty-tips {
		display: flex;
		font-size: 24upx;
		color: #666;
	
	}
	.navbar {
		display: flex;
		height:40px;
		color: #999;
		padding: 0 5px;
		background: #fff;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
	}
	
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
	}
	
	.current {
		color: #EC6104;
	}
	
	.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}
</style>
